<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Panel</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			body {
				padding: 60px
			}

			#panel {
				position: relative;
				width: 100px;
				height: 100px;
				border: 1px solid #0050D0;
				background: #96E555;
				cursor: pointer
			}
		</style>
		<script src="../../scripts/jquery-1.3.1.js"></script>
		<script type="text/javascript">
			$(function() {

				//panel的css的透明度opacity为0.5
				//点击动画展示1、left设置为400px，height为200px，透明度为1，3000毫秒
				//2、top为200px， width为200px，fadeout（缓慢）

				$("#panel").css("opacity", "0.5")
				$("#panel").click(function() {
					$(this).animate({
							left: "500px",
							height: "200px",
							opacity: "1"
						}, 3000)
						.animate({
							top: "200px",
							width: "200px"
						}, 3000)
						.fadeOut("slow")
				})
			})
		</script>


	</head>
	<body>
		<div id="panel"></div>
	</body>
</html>
